<template>
	<view class="page">
		<view>
			<view class="fixed">
				<view class="title">
				{{ data.company_name }}
				<view @click="returns" class="fixedbe">
				</view>
			</view>
				<view class="search_box flex-center">
					<picker value="date" mode="date" :end="endDate" @change="bindDateChange">
						<view class="uni-input">
							{{ date }}
							<u-icon class="arrow" name="arrow-down-fill"></u-icon>
						</view>
					</picker>
				</view>
			</view>
			<view class="content" v-if="!loading">
				<view class="tab_nav">
					<view class="navTitle" v-for="(items,indexs) in navList" :key="indexs">
						<view :class="{'active':isActive === indexs}" @click="checked(indexs)">
							{{items.title}}
						</view>
					</view>
				</view>


				<view class="list" v-if="isActive==0" v-for="item in data.list" :key="item.id">
					<view class="body">
						<view>
							<view class="label">检测日期：</view>
							<view class="value">{{ item.created_time }}</view>
						</view>
						<view>
							<view class="label">检测项目：</view>
							<view class="value">{{ item.project_name }}</view>
						</view>
						<view>
							<view class="label">样品名称：</view>
							<view class="value">{{ item.good_name }}</view>
						</view>
						<!-- <view v-if="is_batch==1 ? true:false">
							<view class="label">批次：</view>
							<view class="value">{{ item.batch_code }}</view>
						</view> -->
						<view>
							<view class="label">抑制率：</view>
							<view class="value">{{ item.inhibition_rate }}%</view>
						</view>
						<view>
							<view class="label">检测结果：</view>
							<view class="value">{{ item.result == 1 ? '合格' : '不合格' }}</view>
						</view>
						<view>
							<view class="label">检测员：</view>
							<view class="value">{{ item.testing_user }}</view>
						</view>
					</view>
					<view class="foot">{{ item.testing_standard }}</view>
				</view>

				<view class="list_box" v-if="isActive==1">
					<view class="pic" v-for="(lunbo,index) in data.qualifications_list" :key="index" @click="previewImage(index)">
						<image :src="lunbo.img" mode="aspectFill"></image>
					</view>
				</view>

				<view v-if="loading">
					<loading></loading>
				</view>
				<view class="nodata" v-if="data.list.length == 0 && !loading">
					<image :src="nodataImg" mode="aspectFit"></image>
					<view>空空如也~</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import loading from './components/loading';
	import {
		$https
	} from '@/static/js/request.js';
	export default {
		data() {
			return {
				date: '',
				endDate: '',
				data: {
					list: []
				},
				nodataImg: getApp().globalData.nodataImg,
				datas: {
					list: [{
							id: 12,
							created_time: '2021-12-05',
							project_name: '鹤顶红',
							good_name: '胡萝卜菜',
							inhibition_rate: '2.33',
							result: 1,
							testing_user: '小霸王',
							testing_standard: '张三儿'
						},
						{
							id: 13,
							created_time: '2021-12-05',
							project_name: '鹤顶红',
							good_name: '胡萝卜菜',
							inhibition_rate: '2.33',
							result: 2,
							testing_user: '小霸王',
							testing_standard: '张三儿'
						},
						{
							id: 14,
							created_time: '2021-12-05',
							project_name: '鹤顶红',
							good_name: '胡萝卜菜',
							inhibition_rate: '2.33',
							result: 1,
							testing_user: '小霸王',
							testing_standard: '张三儿'
						},
						{
							id: 15,
							created_time: '2021-12-05',
							project_name: '鹤顶红',
							good_name: '胡萝卜菜',
							inhibition_rate: '2.33',
							result: 2,
							testing_user: '小霸王',
							testing_standard: '张三儿'
						}
					]
				},
				loading: false,
				is_batch: 0,
				isActive: 0,
				navList: [{
						indexs: 0,
						title: "列表"
					},
					{
						indexs: 1,
						title: "原件"
					},
				],
			};
		},
		mounted() {
			this.getToday();
			this.getData();
		},
		methods: {
			returns(){
				const id = uni.getStorageSync('sourceId');
				uni.redirectTo({
				    url: './index?id=' + id
				});
			},
			checked(indexs) {
				this.isActive = indexs
			},
			previewImage(index) {
				let arr = []
				this.data.qualifications_list.map(e => {
					arr.push(e.img)
				})
				uni.previewImage({
					current: index, //预览图片的下标
					urls: arr //预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
				})
			},
			getToday() {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				this.date = this.endDate = `${year}-${month}-${day}`;
			},
			getData() {
				this.loading = true;
				$https(
					'GETN',
					'drugTestList', {
						created_date: this.date
					},
					res => {
						if (res.data.errcode == 0) {
							let data = res.data.data;
							this.is_batch = data.is_batch;
							let list = data.list;
							for (let index in list) {
								let time = list[index].updated_at * 1000,
									date = new Date(time),
									year = date.getFullYear(),
									month = date.getMonth() + 1,
									day = date.getDate();
								month = month > 9 ? month : '0' + month;
								day = day > 9 ? day : '0' + day;
								list[index].created_time = `${year}-${month}-${day}`;
							}
							this.data = data;
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: 'none'
							});
						}
						this.loading = false;
					},
					true
				);
			},
			bindDateChange(e) {
				this.date = e.target.value;
				this.data = {};
				this.getData();
			}
		},
		components: {
			loading
		}
	};
</script>

<style lang="scss" scoped>
page{
	background-color: #eff9f8;
}
	.page {
		padding: 192rpx 38rpx 0;
		background-color: #eff9f8;

		.fixed {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			z-index: 10;

			.title {
				position: relative;
				color: #19b098;
				font-size: 32rpx;
				font-weight: 500;
				text-align: center;
				height: 90rpx;
				line-height: 90rpx;
				background-color: #eff9f8;
				.fixedbe{
					position: absolute;
					top: 38rpx;
					left: 45rpx;
					content: '';
					width: 19rpx;
					height: 19rpx;
					border-top: 2px #C0C0C0 solid;
					border-left: 2px #ccc solid;
					transform: rotate(-45deg);
				}
			}

			.search_box {
				height: 80rpx;
				background: #fff;
				border-radius: 8rpx;
				margin: 0 38rpx;

				.arrow {
					transform: scale(0.5);
					margin-left: 10rpx;
				}
			}
		}

		.content {
			padding-bottom: 20rpx;
			.list {
				border-radius: 8rpx;
				background: #fff;
				padding: 0px 24rpx;
				margin-bottom: 16rpx;
				background: #ffffff;
				box-shadow: 0rpx 2rpx 20rpx 0rpx rgba(12, 4, 7, 0.09);
				border-radius: 12rpx;
				.top {
					padding: 24rpx 0;
					color: #191919;

					.name {
						color: #19b098;
					}
				}

				.body {
					// border-top: 1px solid #f2f2f2;
					border-bottom: 1px solid #f2f2f2;
					padding: 13rpx 0;

					>view {
						padding: 13rpx 0;
					}

					.label {
						width: 176rpx;
						display: inline-block;
						// color: #8a8a8a;
						color: #191919;
					}

					.value {
						display: inline-block;
						// color: #232323;
						color: #666666;
					}
				}

				.foot {
					color: #424242;
					padding: 18rpx 0;
				}
			}
		}
	}

	.tab_nav {
		width: 60%;
		display: flex;
		justify-content: space-around;
		margin: 0 auto;
		padding-bottom: 20rpx;
	}

	.active {
		color: rgb(79, 163, 137);
		border-bottom: 2rpx solid rgb(79, 163, 137);
	}

	.list_box {
		padding: 0px 24rpx;
		margin-bottom: 16rpx;
		border-radius: 12rpx;
	}

</style>
